<template>
  <view class="disFlxJS">
    <scroll-view
      scroll-x
      :enable-flex="true"
      scroll-with-animation
      scroll-anchoring
      :enhanced="true"
      :show-scrollbar="false"
      class="container flex-1"
    >
      <template v-for="v in data" :key="v.value">
        <view
          class="tag-item"
          :class="[modelValue === v.value && 'tag-item--active']"
          @click="onChange(v)"
        >
          <text>{{ v.label }}</text>
          <text v-if="v.num">({{ v.num }})</text>
        </view>
      </template>
    </scroll-view>
    <view class="flex-shrink-0">
      <slot />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { type PropType, ref } from 'vue';

  export interface TagItem {
    value: number | null;
    label: string;
    num?: number;
  }

  const props = defineProps({
    modelValue: propTypes.number,
    data: Array as PropType<TagItem[]>,
  });

  const emit = defineEmits<{
    (e: 'change', type: TagItem): void;
    (e: 'update:modelValue', type: number | null): void;
  }>();

  function onChange(item: TagItem) {
    if (props.modelValue === item.value) return;
    emit('update:modelValue', item.value);
    emit('change', item);
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 20rpx;
    height: 60rpx;
    display: flex;
    .tag-item {
      height: 56rpx;
      line-height: 56rpx;
      margin: 0 10rpx;
      font-size: 24rpx;
      background-color: #f7f8fa;
      color: #999996;
      padding: 0 24rpx;
      border-radius: 8rpx;
      border: 1px solid transparent;
      flex-shrink: 0;
      &--active {
        border: 1px solid #2878ff;
        background-color: #d0f7ff;
        color: #2878ff;
      }
    }
  }
</style>
